"use client"

import useBearStore from '@/store/useBearStore'

const BearCounter = () => {
  // 使用自动生成的选择器
  const bears = useBearStore.use.bears()
  const honeyAmount = useBearStore.use.honey()?.amount
  const increment = useBearStore.use.increment()
  const increase = useBearStore.use.increase()
  const addHoney = useBearStore.use.addHoney()

  return (
    <div className="flex flex-col items-center gap-4 p-4">
      <h2 className="text-2xl font-bold">熊的数量: {bears}</h2>
      <h3 className="text-xl">蜂蜜数量: {honeyAmount}</h3>
      
      <div className="flex gap-2">
        <button 
          onClick={increment}
          className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"
        >
          增加一只熊
        </button>
        
        <button 
          onClick={() => increase(5)}
          className="px-4 py-2 bg-green-500 text-white rounded hover:bg-green-600"
        >
          增加五只熊
        </button>
        
        <button 
          onClick={() => addHoney(10)}
          className="px-4 py-2 bg-yellow-500 text-white rounded hover:bg-yellow-600"
        >
          增加蜂蜜
        </button>
      </div>
    </div>
  )
}

export default BearCounter 